<script setup lang='ts'>
import { ref, reactive } from 'vue';
import { VtLoading } from "@/components/Loading/index"

const loading1 = ref(false)

const loading2 = ref(false)
function handleLoading2() {
  loading2.value = true;
  setTimeout(() => {
    loading2.value = false;
  }, 2000)
}


const loading3 = ref(true)
function handleService() {
  // 单例的
  const service1 = VtLoading.service(loading3.value)

  const service2 = VtLoading.service(loading3.value)
  console.log(service1);

  setTimeout(() => {
    service1.close()
  }, 1000)
}

const obj = reactive({
  list: [
    {
      name: 1,
      loading: false
    },
    {
      name: 2,
      loading: false
    },
    {
      name: 3,
      loading: true
    }
  ]
})

function handleClick(item: any) {
  console.log('click');

  item.loading = true;
  setTimeout(() => {
    item.loading = false;
  }, 1000)

}

</script>

<template>
  <div class='vt-view__container'>
    <div class="vt-view__row-title">
      普通
    </div>
    <div class="vt-view__row">
      <div class="box" v-loading="loading1" vt-loading-text='loading...' abc="1"></div>
      <button @click="loading1 = !loading1">toggle</button>
    </div>

    <div class="vt-view__row-title">
      .body
    </div>
    <div class="vt-view__row">
      <div class="box" v-loading.body="loading2" abc="2" vt-loading-text='loading...'></div>
      <button @click="handleLoading2">toggle2</button>
    </div>

    <div class="vt-view__row-title">
      .service() 调用
    </div>
    <div class="vt-view__row">
      <button @click="handleService">toggle2</button>
    </div>

    <div class="vt-view__row-title">

    </div>
    <div class="vt-view__row">
      <template v-for="(item, index) in obj.list" :key="index">
        <vt-button :loading="item.loading" @click="handleClick(item)" type="primary">删除</vt-button>
      </template>
    </div>

  </div>
</template>

<style scoped lang='scss'>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>